import React, { useEffect, useState } from 'react';
import { Checkbox, Form, Modal } from 'antd';
import { PermissionTableListItem } from '../permissionData.d';

export interface FormValueType extends Partial<PermissionTableListItem> {
}

export interface ButtonUpdateFormProps {
    onCancel: () => void;
    onSubmit: (values:string[]) => void;
    buttonModalVisible: boolean;
    currentData: Partial<PermissionTableListItem>;
    checkedList: string[];
}

const formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
};

const PermissionButtonForm: React.FC<ButtonUpdateFormProps> = (props) => {
    const [form] = Form.useForm();
    const CheckboxGroup = Checkbox.Group;
    const options = [
        {
            label: '查看',
            value: 'query',
        },
        {
            label: '增加',
            value: 'add',
        },
        {
            label: '删除',
            value: 'delete',
        },
        {
            label: '修改',
            value: 'edit',
        },
        {
            label: '导入',
            value: 'import',
        },
        {
            label: '导出',
            value: 'export',
        },
    ]
    const plainOptions = ['query', 'add', 'delete','edit','import','export'];
    const [ checkedList, setCheckedList ] = useState<Array<string>>(['query', 'add', 'delete','edit','import','export']);
    const [ indeterminate, setIndeterminate ] = useState<boolean>(false);
    const [ checkAll, setCheckAll ] = useState<boolean>(false);

    const onChange = (values: any) => {
        setCheckedList(values);
        setIndeterminate(!!values.length && values.length < plainOptions.length);
        setCheckAll(values.length === plainOptions.length);
    };

    useEffect(() => {
        onChange(checkedList);
    }, [props.checkedList]);


    const onCheckAllChange = (e: any) => {
        setCheckedList(e.target.checked ? plainOptions : []);
        setIndeterminate(false);
        setCheckAll(e.target.checked)
    };

    const {
        onSubmit,
        onCancel,
        buttonModalVisible,
        currentData,
    } = props;

    useEffect(() => {
        if (form && !buttonModalVisible) {
            form.resetFields();
        }
    }, [props.buttonModalVisible]);

    useEffect(() => {
        if (currentData) {
            form.setFieldsValue({
                ...currentData,
            });
        }
    }, [props.currentData]);

    const handleSubmit = () => {
        if (!form) return;
        form.submit();
    };

    const handleFinish = () => {
        console.log('handleFinish ##',checkedList)
        if (onSubmit) {
            onSubmit(checkedList);
        }
    };

    const renderContent = () => {
        return (
            <>
                <Checkbox
                    indeterminate={indeterminate}
                    onChange={onCheckAllChange}
                    checked={checkAll}
                >
                    全选
                </Checkbox>
                <br />
                <CheckboxGroup
                    options={options}
                    value={checkedList}
                    onChange={onChange}
                />
            </>
        );
    };


    const modalFooter = { okText: '保存', onOk: handleSubmit, onCancel };

    return (
        <Modal
            forceRender
            destroyOnClose
            title="权限按钮设置"
            visible={buttonModalVisible}
            {...modalFooter}
        >
            <Form
                {...formLayout}
                form={form}
                onFinish={handleFinish}
            >
                {renderContent()}
            </Form>
        </Modal>
    );
};

export default PermissionButtonForm;
